<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .body {
            width:100%;
            padding:0px;
        }
        .flex-box{
            display: flex;
            flex-wrap: nowrap;
        }
        .flex-box1{
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
        .p{
            text-align: left;
            padding-left: 5%;
            margin-top: 2%;
            font-size: 10px;
            color: #cccccc;
            
        }
        /*上部分*/
        .top{
            width:100%;
            margin: 0 auto;
            padding: 0;
            background:#f5666b;
            text-align: center;
            padding-top:12%;
            padding-bottom:9%;
        }

        .top-pic{

        }

        .top-p{
            color: white;
            /*font-size: 18px;*/
            padding-bottom:10%;
        }
        /*上部分*/

        /*中间部分*/
        .zhucedenglu span{
            display: inline-block;
            width: 50%;

            text-align: center;
            font-size: 18px;
            padding: 20px 0;
        }
        .zhucedenglu span:first-child{
            border-bottom: 1px solid #8c8c8c;
        }
        #phone{
            width: 80%;
            height: 10%;
        }

        .reg_btn{
            width:82%;
            height:40px;
            background:#FAB2B5;
            margin:0 auto;
            text-align:center;
            line-height:40px;
            color:white;
            border-radius:4px;
            cursor:pointer;
            margin-top:10px;
        }
        /*中间部分*/

        /*底部*/
        .bottom{
            width: 82%;
            margin: 18% auto 0;
            text-align: center;
        }
        .bottom-borderleft,.bottom-borderright{
            width:34%;
            border-bottom:1px solid #f5666b;
            margin: 2%;
        }
        .other{
            font-size: 12px
        }

        .bottom-pic{
            width: 50%;
            margin: 2% auto;
        }

        /*底部*/
    </style>


</head>
<body>
<div class="body">
    <!--上部分-->
    <div class="top">
        <div class="top-pic"><img src="zhongjianlogo.png"></div>
        <p class="top-p">两颗心的相遇 一辈子的幸福</p>
    </div>
    <!--上部分-->


    <!--中间部分-->
    <div class="middle">
        <div class="zhucedenglu flex-box">
            <span>注册</span>
            <span>登录</span>
        </div>

        <div class="inputdiv" style="text-align:center;margin:18px;position: relative">
            <span style="position: absolute;top: 10px;left: 30px;color:#757575" id="s1" onclick="toSelectCountry()">+86</span> <input id="phone"  style="width:90%;height:40px;border:1px solid #ccc;border-radius:5px;padding:10px;box-sizing:border-box;outline:none;padding-left: 18%" placeholder="手机号" onblur="check_phone()" />
            <p class="p" id="phone_info"></p>
        </div>

        <div class="inputdiv" style="text-align:center;margin:18px;">
            <input style="width:59%;height:40px;border:1px solid #ccc;border-radius:5px;padding:10px;box-sizing:border-box;outline:none;" onblur="check_yzm()" placeholder="短信验证码" id="yzm" />
            <input style="width:30%;height:40px;border:1px solid #ccc;border-radius:5px;padding:10px;box-sizing:border-box;outline:none;" id="yzm_btn" onclick="getYZM()" value="获取验证码" type="button" />
            <p class="p" id="yzm_info"></p>
        </div>

        <div class="inputdiv" style="text-align:center;margin:18px;">
            <input style="width:90%;height:40px;border:1px solid #ccc;border-radius:5px;padding:10px;box-sizing:border-box;outline:none;" onblur="check_mima()" placeholder="密码" id="mima" />
            <p class="p" id="mima_info"></p>
        </div>

        <div class="inputdiv" style="text-align:center;margin:18px;">
            <input style="width:90%;height:40px;border:1px solid #ccc;border-radius:5px;padding:10px;box-sizing:border-box;outline:none;" onblur="check_mima2()" placeholder="确认密码" id="mima2" />
            <p class="p" id="mima2_info"></p>
        </div>

        <div class="reg_btn" onclick="reg()">注册</div>


        <script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>

        <script src="reg.js"></script>


    </div>
    <!--中间部分-->


    <!--底部-->
    <div class="bottom flex-box">
            <div class="bottom-borderleft"></div>
            <div class="other">其他方式登录</div>
            <div class="bottom-borderright"></div>
    </div>
    <div class="bottom-pic flex-box1">
        <img src="weibologo.png" style="width: 20%;height: 20%" />
        <img src="qqlogo.png" style="width: 20%;height: 20%"  />
        <img src="weixinlogo.png" style="width: 20%;height: 20%" />
    </div>
    <!--底部-->
</div>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script src="reg.js"></script>
</body>
</html>